<template>
	<div class="partnerList">
		
		<div class="partnerList_top">
			<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 10px;">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/salesman' }">业务员列表</el-breadcrumb-item>
				<el-breadcrumb-item>业务员详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="partnerList_bottom">
			<div class="partnerList_bottom_new">
				<div class="partnerList_bottom_new_goods">
					
					<div class="subnav">
						<div class="wrapBox">
						<div class="itemBlock">
							<h2>基本信息</h2>
							<ul>
								<li>
									业务员名称：<strong >{{userData.nickname}}</strong>
								</li>
								<li>
									手机号码：<strong >{{userData.to_user_phone}}</strong>
								</li>
								<li>
									创建时间：<strong >{{formatDate(userData.created_at)}}</strong>
								</li>
								<li>
									优惠卷总数：<strong >{{userData.coupon_total}}</strong>
								</li>
							</ul>
						</div>
						<div class="closed_details_title_right">
						  <button class="closed_details_title_right_btn"
						          @click="handerBase">
						    返回
						  </button>
						</div>
						</div>
						<div class="searchBlock">
							<!-- <span style="margin-left: auto;">状态：</span>
							<el-select
							  v-model="coupon_type"
							  clearable
							  @change="selectOrder"
							  filterable
							  placeholder="优惠卷状态"
							>
							  <el-option
							    v-for="item in statusList"
							    :key="item.id"
							    :label="item.name"
							    :value="item.id"
							  >
							  </el-option>
							</el-select>
							订单日期：
							<el-date-picker
							  style="margin-right: 20px"
							  clearable
							  v-model="valueTime"
							  :picker-options="pickerOptions"
							  type="daterange"
							  @change="selectTime"
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							>
							</el-date-picker> -->
							
							<!-- <div class="item" style="margin-left:auto;">
								<el-input v-model="keyword" placeholder="搜索"></el-input>
							</div>
							<div class="item" style="margin-left: 15px;">
								 <el-button type="primary" @click="handerSeach" size="small">搜索</el-button>
							</div> -->
						</div>
					</div>
				</div>
			</div>
			<div class="partnerList_table">
                 <h2>优惠卷配置信息</h2>
				<div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>优惠卷名称</th>
							<th>满足条件</th>
							<th>减免金额</th>
							<th>限制数量</th>
							<th>有效期起</th>
							<th>有效期终</th>
							<th>数量</th>
							<th>领取数量</th>
							<th>使用数量</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in listData" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}"
									@click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>
								{{v.name}}
							</td>
							<td>
								{{v.condition}}
							</td>
							<td>
								{{v.discount_money}}
							</td>
							<td>{{v.receive_limit}}</td>
							<td>{{formatDate(v.start_time)}}</td>
							<td>{{formatDate(v.end_time)}}</td>
							<td>
								{{v.stock}}
							</td>
							<td>{{v.receive_total}}</td>
							<td>{{v.verify_total}}</td>
							<td>{{couponStatus[v.status]}}</td>
							<td>
								<button class="editor delete" @click="deletes(v.id)">删除</button>
							</td>
						</tr>
						<tr v-if="listData.length == 0">
							<td class="table_title" colspan="10">当前数据空空如也</td>
						</tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<!-- <font class="checkbox" :class="{'check_active' : checkAll}"><i
										class="el-icon-check"></i></font> -->
							</div>
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="total" background>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import modal from 'ant-design-vue/lib/modal';
	import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
	import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
	export default {
		components: {
			modal
		},
		data() {
			return {
				listData: [],
				keyword: '',
				input: '',
				checkAll: false,
				page: 1,
				pageSize: 20,
				pageSizes: 10,
				total: 0,
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],
				tableList: [],
				order_status: '', //订单状态
				visibleShow: false,
				merchantShow: false, //编辑窗口显示
				dialogVisible: false,
				fileList: [],
				couponStatus: {
						0: '未到时间',
						1: '正常',
						2: '已过期'
					},
				activityKeyword: '', //活动搜索
				userData: {}, //用户详情
				edit: false, //是否编辑
				id:'',
				statusList:[
					{
					id:0,
					name:'未到期',
					
					}
				],
				coupon_type:'',//状态类型
				valueTime: [],
				pickerOptions: {
				  disabledDate(time) {
				    return time.getTime() > Date.now() - 8.64e6;
				  },
				},
				startDate:'',
				endDate:'',
				
			}
		},
		mounted(options) {
			let data = this.$route.query;
			this.id = data.id;
			//用户详情
			this.getUserDateils(data.id);
		},

		methods: {

			handleSelect(item) {
				console.log(item);
			},
			// 选择订单类型
			selectOrder() {
				this.getUserOrder(this.choose_id);
			},

			handleAdd() {
				this.MadalTitle = "添加成员";
				this.visibleShow = true;
				this.getUserList();
			},
			//获取优惠卷列表
			getCoupon(user_id) {
				let params = {
					from_user_id:user_id,
					keyword:this.keyword,
					page: this.page,
					pagesize: this.pageSize
				}
				let that = this;
				that.$http.post('/api/root/promotion/coupon/list', params).then(res => {
					if (res.code === 1) {
						var data = res.data.coupons
						that.listData = data
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg)
				})
			},
			// 图片上传
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;

				this.dialogVisible = true;
			},
			
			getHMS(time) {
				const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
				const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
				const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
				return hour + ':' + min + ':' + sec
			},

			
			//删除优惠卷
			deletes(id) {
				let params = {
					id: id, //优惠卷id
				}
				let that = this;
				this.$confirm('是否删除该优惠卷', '提示').then(() => {
					that.$http.post('/api/root/promotion/coupon/delete', params).then(res => {
						if (res.code === 1) {
							that.$message.success('操作成功')
							that.getCoupon(that.userData.to_user_id);
						} else {
							that.$message.error(res.msg)
						}
					}).catch(err => {
						that.$message.error(err.msg ? err.msg : err.toString())
					})
				})
			},
			//用户详情
			getUserDateils(id) {
				let params = {
					id: id,
				}
				this.$http.post('/api/root/promotion/auth/detail', params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.userData = data
						this.getCoupon(data.to_user_id);
					}else{
						this.userData=[];
					}
				}).catch(err => {
					this.$message.error(err.msg ? err.msg : err.toString())
				})
			},
			handerBase() {
			  this.$router.go(-1)
			},
			// 选择时间
			selectTime() {
			  this.startDate = this.valueTime
			    ? this.$moment(this.valueTime[0]).format("yyyy-MM-DD 00:00:00")
			    : "";
			  this.endDate = this.valueTime
			    ? this.$moment(this.valueTime[1]).format("yyyy-MM-DD 23:59:59")
			    : "";
			  this.getUserOrder();
			},
			handleCancel() {
				this.MadalTitle = ''
				this.dialogVisible = false
				this.visibleShow = false
				this.fileList = [];
			},
			//隐藏弹窗
			storeCancel() {
				this.MadalTitle = ''
				this.merchantShow = false
			},

			// 选择状态
			selectStatus() {
				this.getUserOrder()
			},
			
			// 多选
			handlerCheckbox(i) {
				console.log(i);
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index != -1) {
						arr.splice(index, 1);
						this.shelvesAlls.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
						this.shelvesAlls.push(this.tableList[v].id.toString());;
					})
				} else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},
			//搜索
			handerSeach() {
				this.getUserOrder(this.choose_id)
			},

			handleSizeChange(val) {
				this.pageSize = val;
				this.getUserOrder(this.choose_id)
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUserOrder(this.choose_id)
			},
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			},
			//商户列表跳转
			teamDateils(id) {
				this.$router.push({
					name: "teamDateils",
					query: {
						id
					},
				});
			},
			goDetails(steward_id, user_id) {
				this.$router.push({
					name: "teamDateils",
					query: {
						steward_id,
						user_id
					},
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	@import 'index.less';

	.partnerList_bottom_new_goods_screening {
		width: 100%;
		height: auto;
		display: flex;

		.searchBtn {
			max-width: 90px;
			min-width: 68px;
			height: 42px;
			line-height: 42px;
			background-color: #409EFF;
			margin-left: 5px;
			border: 0 none;
			outline: none;
			border-radius: 4px;
			color: #fff;
			cursor: pointer;
		}

		.inputBox {
			margin-right: 20px;
		}
	}
.partnerList_table h2{
	font-size: 14px;
	font-weight: 550;
}
.wrapBox{
	display: flex;
	justify-content: space-between;
	}
	.closed_details_title_right{
		&_btn{
			width: 100px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border-radius: 4px;
			outline: none;
			border: 0 none;
			background: #27b148;
			color: #fff;
			cursor: pointer;
		}
	}


	.subnav {
		// margin:0 0 0 20px;
		.itemBlock {
			h2{
				font-size: 14px;
				font-weight: 550;
			}
			ul {
				li {
					font-size: 16px;
					line-height: 28px;
					list-style: none;
				}
			}
		}
		.searchBlock{
			display: flex;
			align-items: center;
		}
	}
</style>
<style>
	.ant-modal {
		width: 590px !important;
	}
</style>
